// Unless you want to include all components, you must set $include-default to false
// IF you set this to true, you can also remove lines 10 to 38 of this file
$include-default: false;

// Insert your custom variables here.
//base-color
	$base-color: #d9d9d9;

//btn-group
	$btn-group-background-color: #e4e4e4;
	$btn-group-border-color: #c7c7c7;
	$btn-group-inner-border-color: #ececec;
	$btn-group-header-background-color: #cccccc;
	$btn-group-header-color: black;

//button-default
	$button-default-base-color: $base-color;
	$button-default-base-color-over: adjust-color($base-color, $hue: 0deg, $saturation: 0%, $lightness: 10%);
	$button-default-base-color-focus: $button-default-base-color-over;
	$button-default-base-color-pressed: adjust-color($base-color, $hue: 0deg, $saturation: 0%, $lightness: 10%);

	$button-default-background-color: adjust-color($base-color, $hue: 0deg, $saturation: 0%, $lightness: 10%);
	$button-default-background-color-over: adjust-color($base-color, $hue: 0deg, $saturation: 0%, $lightness: 10%);
	$button-default-background-color-pressed: adjust-color($base-color, $hue: 0deg, $saturation: 0%, $lightness: 10%);
	$button-default-background-gradient: 'my-button';
	$button-default-background-gradient-over: 'my-button-over';
	$button-default-background-gradient-focus: $button-default-background-gradient-over;
	$button-default-background-gradient-pressed: 'my-button-pressed';

	$button-default-border-color: adjust-color($base-color, $hue: 0.084deg, $saturation: -9.891%, $lightness: -10%);
	$button-default-border-color-over: $button-default-border-color;
	$button-default-border-color-focus: $button-default-border-color;
	$button-default-border-color-pressed: $button-default-border-color;

//button-toolbar
	$button-toolbar-border-color: $button-default-border-color;
	$button-toolbar-background-color: $button-default-background-color;
	$button-toolbar-background-color-over: $button-default-background-color-over;
	$button-toolbar-background-color-pressed: $button-default-background-color-pressed;
	$button-toolbar-background-gradient: $button-default-background-gradient;
	$button-toolbar-background-gradient-over: $button-default-background-gradient-over;
	$button-toolbar-background-gradient-focus: $button-default-background-gradient-focus;
	$button-toolbar-background-gradient-pressed: $button-default-background-gradient-pressed;

//panel
	$panel-header-background-gradient: 'my-panel-header';
	$panel-header-background-color: adjust-color($base-color, $hue: 0deg, $saturation: 0%, $lightness: 4.51%);
	$panel-header-color: black;

//toolbar
	$toolbar-background-color: #e5e5e5;
	$toolbar-background-gradient: color_stops(#ededed, $toolbar-background-color);

//window
	$window-header-color: black;

//datepicker
	$colorpicker-item-border-color: #a2a2a2;
	$colorpicker-over-border-color: #bfbfbf;
	$datepicker-border-color: #434343;
	$datepicker-header-background-color: #4f4f4f;
	$datepicker-monthpicker-color: #7f7f7f;
	$datepicker-th-color: #484848;
	$datepicker-th-background-color: #ededed;
	$datepicker-item-hover-background-color: #ededed;
	$datepicker-selected-item-border-color: #b8b8b8;
	$datepicker-selected-item-background-color: #e6e6e6;
	$datepicker-monthpicker-item-color: #505050;
	$datepicker-footer-background-color: $datepicker-th-background-color;
	$datepicker-monthpicker-item-selected-background-color: $datepicker-footer-background-color;

//tabs
	$tab-color-active: #444444;
	$tab-base-color: #efefef;

@import 'ext4/default/all';

// You may remove any of the following modules that you
// do not use in order to create a smaller css file.
@include extjs-boundlist;
@include extjs-button;
@include extjs-btn-group;
@include extjs-datepicker;
@include extjs-colorpicker;
@include extjs-menu;
@include extjs-grid;
@include extjs-form;
    @include extjs-form-field;
    @include extjs-form-fieldset;
    @include extjs-form-checkboxfield;
    @include extjs-form-checkboxgroup;
    @include extjs-form-triggerfield;
    @include extjs-form-htmleditor;
@include extjs-panel;
@include extjs-qtip;
@include extjs-slider;
@include extjs-progress;
@include extjs-toolbar;
@include extjs-window;
@include extjs-messagebox;
@include extjs-tabbar;
@include extjs-tab;
@include extjs-tree;
@include extjs-drawcomponent;
@include extjs-viewport;

// This line changes the location of your images when creating UIs to be relative instead of within the ExtJS directory.
// You MUST set this to true/string value if you are creating new UIs + supporting legacy browsers.
// This only applies to new UIs. It does not apply to default component images (i.e. when changing $base-color)
// The value can either be true, in which case the image path will be "../images/"
// or a string, of where the path is
$relative-image-path-for-uis: true; // defaults to "../images/" when true